<template>
  <custom-container>
    <custom-container-header no-spacing>
      <el-form :model="filters" ref="form" :disabled="loading"
               inline size="medium"
               @submit.native.prevent="getAll"
               class="width-100"
      >
        <el-form-item>
          <el-select v-model="filters.domain" placeholder="请选择域名">
            <el-option
              v-for="city in cDomainList"
              :key="city.domain"
              :label="city.cDomain"
              :value="city.domain">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <custom-button-group v-model="time">
            <custom-button v-for="period in periods" :key="period.value" :label="period.value">
              {{period.title}}
            </custom-button>
          </custom-button-group>
        </el-form-item>
      </el-form>
    </custom-container-header>
    <custom-container-body>
      <el-table :data="cTableData.list" :loading="loading" element-loading-text="加载中..." border border-radius
      >
        <el-table-column
          align="center"
          prop="date"
          label="日期">
        </el-table-column>

        <el-table-column
          align="center"
          prop="ip"
          label="IP访问量">
        </el-table-column>
        <el-table-column
          align="center"
          prop="reg"
          label="注册用户量">
        </el-table-column>
        <el-table-column
          align="center"
          label="注册率">
          <template slot-scope="{row}">
            {{getPercentage(row)}}%
          </template>
        </el-table-column>

        <template slot="empty">
          <div class="el-table__empty">
            <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
            <div class="el-table-text">暂无数据</div>
          </div>
        </template>
      </el-table>


      <div class="el-pagination-container">
        <el-pagination
          bordered
          @size-change="localGridSizeChange" @current-change="localGridCurrentChange"
          :current-page="filters.page" :page-size="filters.size"
          :total="cTableData.total">
        </el-pagination>
        <!--<el-warning>IP访问量，已经去除注册过的用户访问IP</el-warning>-->
      </div>
    </custom-container-body>
  </custom-container>
</template>

<script type="text/jsx">

  import {
    proxyInfoApi as domainListApi
  } from "@/services/api/promotion";
  import {regRateApi as getApi} from '@/services/api/home';

  import {grid, pickerOption} from '@/build';

  export default {
    name: "register-analysis",
    mixins: [grid, pickerOption],

    data() {
      return {
        filters: {
          date: undefined,
          page: 1,
          size: 10,
          domain: undefined,
        },
        domainList: [],
        time: 7,
        periods: [
          {
            title: '过去7天',
            value: 7,
            start: [-6, 'day'],
            end: [0, 'day'],
          },
          {
            title: '过去14天',
            value: 14,
            start: [-13, 'day'],
            end: [0, 'day'],
          },
          {
            title: '过去30天',
            value: 30,
            start: [-29, 'day'],
            end: [0, 'day'],
          },
          {
            title: '过去60天',
            value: 60,
            start: [-59, 'day'],
            end: [0, 'day'],
          },
        ],
        tableData: {
          list: [],
          total: 0,
        },
      };
    },

    watch: {
      'filters.domain'() {
        this.doGet({action: 'getGrid'});
      },
    },

    computed: {
      cDomainList() {
        return [{domain: undefined, cDomain: '全部'}, ..._.map(this.domainList, (domainInfo) => {
          return {
            ...domainInfo,
            cDomain: domainInfo.domain
            // cDomain: _.toDomain(domainInfo.domain)
          };
        })];
      },
    },

    methods: {
      getPercentage(row) {
        return row.ip ? _.formatDiv(row.reg * 100, row.ip, {fixed: 2, clear: false}) : 0.00;
      }
    },

    mounted() {
      this.bindGet(domainListApi, 'domainList', {
        action: 'getDomainList',
        format: data => {
          return data.list;
        }
      });

      this.doGet({action: 'getDomainList'});

      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format: data => {
          let fData = {
            list: _(data).map((info, date) => {
              return {
                date,
                ...info
              };
            }).orderBy(['date'], ['desc']).value(),
            total: _.size(data)
          }

          return fData;
        }
      });
    }
  };

</script>

